<template>
	<view class="contemt">
		<view class="ctn" @click="goAppDetail">
			<view class="ctn_left">
				<view class="iconImg" :style="{ background: '#ff0004' }" v-if="status == 0"><span class="iconfont icon-weitongguo iconicon"></span></view>
				<view class="iconImg" :style="{ background: '#ffc618' }" v-if="status == 2"><span class="iconfont icon-dengdai iconicon"></span></view>
				<view class="iconImg" :style="{ background: '#30b607' }" v-if="status == 1"><span class="iconfont icon-tongguo iconicon"></span></view>
				<view class="iconImg" :style="{ background: '#0389ff' }" v-if="status == 3"><span class="iconfont icon-tubiao_tijiao iconicon"></span></view>
				<view class="iconImg" :style="{ background: '#bfbfbf' }" v-if="status == -1"><span class="iconfont icon-bianji1 iconicon"></span></view>
				<view>
					<text v-if="status == 0">未通过</text>
					<text v-else-if="status == 1">已通过</text>
					<text v-else-if="status == 2">进行中</text>
					<text v-else-if="status == 3">已提交</text>
					<text v-else-if="status == -1">自由</text>
				</view>
			</view>
			<view class="ctn_middle">
				<view class="middle_top">
					<view>
						<text>{{ propTitlel }}</text>
						<text class="top_r">{{ propdays }}天</text>
					</view>
					<view class="ctn_middle-toles">
						<view @click="change" class="change">查看详情</view>
						<span class="iconfont icon-shanchu1 head-delete-btn" @click="deleteRec" v-if="status != 2 && status != 1"></span>
					</view>
				</view>
				<view class="middle_bottom" v-for="(item, index) in timeArr">
					<text>开始时间: {{ item.viewStarttime }}</text>
					<text class="leave-hours">结束时间: {{ item.viewEndtime }}</text>
				</view>
			</view>
		</view>
		<view class="ctn_middle-btn" v-if="isBtn">
			<view class="ctn-btn-wrap">
				<assignCharacter v-if="showBtn" :billtype="billtype" @outConfirm="outConfirm" :formPk="pk" ref="assignCharacter" action="sendapprove"></assignCharacter>
				<view class="take-back-btn" @click="takeback" v-if="isShowTakeBtn">收回</view>
				<my-button class="confirm-btn" @click="comfirmBtn" width="140" height="50" v-if="showBtn">提交</my-button>
				<my-button class="confirm-btn" @click="checkPrograss" width="140" height="50" v-if="!showBtn" type="text">查看进程</my-button>
			</view>
		</view>
		<!-- <view class="file-list" v-if="fileList.length!=0">
			<view class="file-tips">附件</view>
			<view class="file-sub" v-for="(item,index) in fileList">
				<view class="file-wrap">
					<view @click="deleteFile">删除</view>
					<view>新建文件.xl</view>
					<view class="down-btn">下载</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import service from '../../common/service/new_file.js';
import apiData from '../../common/utils/apiData.js';
export default {
	name: 'my-Approval',
	data() {
		return {
			// iconList: ['/static/bg/ddz.png', '/static/bg/ytg.png', '/static/bg/wtg.png','/static/bg/wtg.png']
		};
	},
	props: {
		status: {
			default: 1
		},
		propTitlel: {
			default: '2'
		},
		propdays: {
			default: '1.5'
		},
		billtype:{
			type:String,
			default:"HA01"
		},
		timeArr: {
			type: Array
		},
		showBtn: {
			type: Boolean,
			default: true
		},
		isBtn: {
			type: Boolean,
			default: true
		},
		isShowTakeBtn: {
			type: Boolean,
			default: false
		},
		pk: '' //单据pk
	},
	methods: {
		checkPrograss() {
			this.$emit('prograss');
		},
		outConfirm(valobj) {
			//指派事件完成后才向外提交
			this.$emit('confirm', valobj);
		},
		comfirmBtn() {
			this.$refs.assignCharacter.init();
		},
		deleteRec() {
			this.$emit('deleteRec');
		},
		takeback() {
			this.$emit('takeback');
		},
		change() {
			this.$emit('edit');
		},
		goAppDetail() {
			let newObj = {
				status: this.status,
				propTitlel: this.propTitlel,
				propdays: this.propdays,
				propDate: this.propDate
			};
			this.$emit('handleClick', newObj);
		}
	},
	created() {}
};
</script>

<style lang="scss" scoped>
.ctn_middle-toles {
	display: flex;
	align-items: center;
	.change {
		margin-right: 20rpx;
		padding: 0 10rpx;
		color: #007aff;
		border-radius: 8rpx;
	}
}
.file-list {
	padding: 16rpx 0;
	.file-tips {
		font-size: 28rpx;
		font-weight: 600;
		color: #ff0004;
	}
	.file-sub {
		font-size: 28rpx;
		margin: 6rpx;
		border-bottom: 1px solid #d6d5c9;
		padding: 4rpx;
		.file-wrap {
			display: flex;
			justify-content: space-between;
			.down-btn {
				color: #007aff;
			}
		}
	}
}
.take-back-btn {
	display: flex;
	justify-content: center;
	height: 50rpx;
	line-height: 50rpx;
	width: 130rpx;
	color: #ffffff;
	border-radius: 38rpx;
	background: #d62000;
}
.head-delete-btn {
	height: 30rpx;
	width: 40rpx;
	color: red;
	font-weight: 400;
}
.iconImg {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	.iconicon {
		font-size: 45rpx;
		color: #ffffff;
	}
}
.contemt {
	background: #ffffff;
	box-shadow: 0px 8rpx 24rpx 0px rgba(70, 66, 130, 0.1);
	border-radius: 16rpx;
	margin-bottom: 24rpx;
	padding: 16rpx 24rpx 16rpx 24rpx;
}
.ctn_middle-btn {
	width: 100%;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	margin-top: 10rpx;
	.ctn-btn-wrap {
		display: flex;
	}
}
.bianjiICon {
	font-size: 70rpx;
	color: #b4b4b4;
}
.time-tip {
	margin: 0 10rpx;
}
.list-icon {
	font-size: 24rpx;
}
.imgIcon {
	display: inherit;
}
.ctn {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 16rpx;
	.ctn_left {
		font-size: 20rpx;
		font-weight: 400;
		color: #a7a3a3;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 72rpx;
			height: 72rpx;
		}
	}
	.ctn_middle {
		margin-left: 28rpx;
		flex: 1;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #121f2c;
		.middle_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			margin-bottom: 8rpx;
			color: #4a4a4a;
			.top_r {
				margin-left: 26rpx;
				color: #ff7707;
			}
		}

		.middle_bottom {
			display: flex;
			flex-direction: column;
			font-size: 12px;
			font-weight: 400;
			padding: 4rpx 0;
			color: #969696;
		}
	}
	.ctn_right {
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
}
</style>
